<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
	*{
		margin:0px;
		padding:0px;
		list-style:none;
	}
	#kuang{
		height:400px;
		width:100%;
		border:1px solid red;

	}
	#kuang .show{
		height:50px;
		width:100%;
		line-height:50px;
		text-align:center;
		border-bottom:1px solid red;
	}
	#kuang .touch{
		height:350px;
		width:100%;
		
	}
	#kuang .touch .ke{
		height:100px;
		width:100px;
		border:1px solid red;
		position:relative;
		float:left;
		/*overflow:hidden;*/
	}
	#kuang .touch .ke:nth-child(n+1){
		margin-left:15px;
	}
	#kuang .touch .ke .touch_year{
		height:100px;
		width:100px;
		position: absolute; 
		left: 0; 
		top: 0%;
	}
	/*引入的css*/
	.touch_year .page { height: 100px; position: relative; color:#fff;text-align:center;line-height:100px;}
	.touch_year .page0 { background-color: blue; }
	.touch_year .page1 { background-color:#93F; }
	.touch_year .page2 { background-color:#F90; }
	.touch_year .page3 { background-color: green; }
	.touch_year .page4 { background-color: tomato; }
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/jquery.touchswipe/1.6.18/jquery.touchSwipe.js"></script>
	<script type="text/javascript">
	$(function(){
		var nowpage = 0;
           //给最大的盒子增加事件监听
           $(".touch_year").swipe(
               {
                   swipe:function(event, direction, distance, duration, fingerCount) {
                        if(direction == "up"){
                           nowpage = nowpage + 1;
                        }else if(direction == "down"){
                           nowpage = nowpage - 1;
                        }

                        if(nowpage > 4){
                           nowpage = 4;
                        }

                        if(nowpage < 0){
                           nowpage = 0;
                        }

                       $(".touch_year").animate({"top":nowpage * -100 + "%"},200);

                       $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
                       var year = $(".page").eq(nowpage).text();
                       $('.year').text(year);
                   }
               }
           );

	})

	</script>
</head>
<body>
	<div id="kuang">
		<div class="show">
			<span class="year">2016</span>-<span class="time">10</span>-<span class="hour">2</span>
		</div>
		<div class="touch">
			<div class="ke">
				<div class="touch_year">
					<div class="page page0 cur">
						2016
					</div>
					  <div class="page page1">
						2015
					</div>
					  <div class="page page2">
						2014
					</div>
					  <div class="page page3">
						2013
					</div>
					  <div class="page page4">
						2012
					</div>
				</div>
			</div>
			<div class="ke">
				<div class="touch_year">
					<div class="page page0 cur">
						2016
					</div>
					  <div class="page page1">
						2015
					</div>
					  <div class="page page2">
						2014
					</div>
					  <div class="page page3">
						2013
					</div>
					  <div class="page page4">
						2012
					</div>
				</div>
			</div>
			<div class="ke">
				<div class="touch_year">
					<div class="page page0 cur">
						2016
					</div>
					  <div class="page page1">
						2015
					</div>
					  <div class="page page2">
						2014
					</div>
					  <div class="page page3">
						2013
					</div>
					  <div class="page page4">
						2012
					</div>
				</div>
			</div>
		</div>

	</div>
	
</body>
</html>